//入口文件
import Vue from 'vue'
//配置vuex的步骤：
//1.运行npm i vuex -S
//2.导入包
import Vuex from 'vuex'
//注册vuex到vue中
Vue.use(Vuex)
//4.new Vuex.Store()实例，得到一个数据仓储对象

//每次刚进入网站，肯定会调用main.js,在刚调用的时候，先从本地存储中，把购物车的数据读出来，放到store中
var car=JSON.parse(localStorage.getItem('car')||'[]')
var store=new Vuex.Store({
    state:{
        //大家可以把state想象成组件中的data，专门用来存储数据的
        //如果在组件中，想要访问store中的数据，只能通过this.$store.state.***来访问
        car:car//将购物车中商品的数据用一个数组存储起来，在car数组中，存储一些商品的对象，咱们可以暂时将这个商品对象，设计成这个样子{id:商品id，count:要购买的数量，price:商品的单价，selected:false}
    },
    mutations: {
        addToCar(state,goodsinfo){
            //点击加入购物车，把商品信息，保存到store中的car上

            //分析：
            //1.如果购物车中之前就已经有这个对应的商品了，只需要更新数量
            //2.如果没有，则直接把商品数据push到car中即可
            //假设在购物车中没有找到对应的商品
            var flag=false;
            state.car.some(item=>{
                if(item.id==goodsinfo.id){
                    item.count+=parseInt(goodsinfo.count)
                    flag=true;
                    return true
                }
            })
            //如果最终循环完毕得到的flag还是false，则把商品数据直接push到购物车
            if(flag==false){
                state.car.push(goodsinfo)
            }

            //当更新car之后，把car数组存储到本地的localStorage
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updateGoodsInfo(state,goodsinfo){
            //修改购物车中商品的数量值
            state.car.some(item=>{
                if(item.id==goodsinfo.id){
                    item.count=parseInt(goodsinfo.count)
                    return true;
                }
            })
             //当修改完商品的数量之后，把最新的购物车数据，保存到本地存储中
             localStorage.setItem('car',JSON.stringify(state.car))
        },
        removeFromCar(state,id){
            //根据ID从store中的购物车删除对应的那条商品数据
            state.car.some((item,i)=>{
                if(item.id==id){
                    state.car.splice(i,1)
                    return true
                }
            })
            //将删除完后的。最新的购物车数据，同步到本地存储中
            localStorage.setItem('car',JSON.stringify(state.car))
        },
        updateGoodsSelected(state,info){
            state.car.some(item=>{
                if(item.id==info.id){
                    item.selected=info.selected
                }
            })
            //把最新的所有购物车商品的状态保存到store中
            localStorage.setItem('car',JSON.stringify(state.car))
        }
        //注意：如果要操作store中的state值，只能通过调用mutations提供的方法，才能操作对应的数据，不推荐直接操作state中锋数据，因为，万一导致了数据的紊乱，不能快速定位到错误的原因，因为，每个组件都可能有操作数据的方法
        //注意：如果组件想要调用mutations中的方法，只能使用this.$store.commit('方法名')
        //这种调用mutations方法的格式，和this.$emit(’父组件中的方法名)
        //注意：mutations的函数参数列表中，最多支持两个参数，其中，参数1：是state状态；参数2：通过commit提交过来的参数
    },
    getters: {
      //注意：这里的getters，只负责向外提供数据，不负责修改数据，如果想要修改state中的数据，请取找motations
      //经过回顾对比，发现getters中的方法，和组件中的过滤器比较类似，因为，过滤器和getters都没有修改原始数据，都是把原数据做了一层封装，提供给了调用者，
      //其次，getters也和computed比较像，只要state中的数据发生变化，那么，如果getters正好也引用了这个数据，就会立即触发getters的重新求值
      

      //相当于计算属性，也相当于filters
      getAllCount(state){
          var c=0;
          state.car.forEach(item=>{
              c+=item.count
          })
          return c;
      },
      getGoodsCount(state){
          var o={};
          state.car.forEach(item=>{
                o[item.id]=item.count
          })
          return o;
      },
      getGoodsSelected(state){
          var o={}
          state.car.forEach(item=>{
            o[item.id]=item.selected
          })
         return o;
      },
      getGoodsConutAndAmount(state){
          var o={
              count:0,//勾选数量
              amount:0,//勾选总价
          }
          state.car.forEach(item=>{
              if(item.selected){
                  o.count+=item.count
                  o.amount+=item.price*item.count
              }              
          })
          return o;
      }
    }
})
//导入App根组件
import app from './App.vue'
//按需导入Mint-UI中的组件
// import {Header} from 'mint-ui'
//导入mui的样式
import './mui/css/mui.min.css'
import './mui//css/icons-extra.css'
// import {Swipe, SwipeItem,Button} from 'mint-ui'
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button);
//导入路由的包
import VueRouter from 'vue-router'
//安装路由
Vue.use(VueRouter)
//导入自己的router.js路由模块
import router from './router.js'
//导入vue-resource
import VueRescource from 'vue-resource'
Vue.use(VueRescource)
//设置请求的根路径
Vue.http.options.root='http://www.liulongbin.top:3005'
//全局设置post时候表单数据格式的组织形式
Vue.http.options.emulateJSON=true
// Vue.component(Header.name,Header)
//导入时间插件
import moment from 'moment'
//定义全局的过滤器
Vue.filter('dataFormat',function(dataStr,pattern="YYYY-MM-DD HH:mm:ss"){
    return moment(dataStr).format(pattern)
})
// import { Lazyload } from 'mint-ui';
// Vue.use(Lazyload);
import  MintUI from 'mint-ui'
Vue.use(MintUI)
//安装图片预览插件
import VuePreview from 'vue-preview'
// defalut install
Vue.use(VuePreview)
// with parameters install
Vue.use(VuePreview, {
    mainClass: 'pswp--minimal--dark',
    barsSize: {top: 0, bottom: 0},
    captionEl: false,
    fullscreenEl: false,
    shareEl: false,
    bgOpacity: 0.85,
    tapToClose: true,
    tapToToggleControls: false
})
var vm=new Vue({
    el:'#app',
    render:c=>c(app),
    router, //挂载路由对象到vm实例上
    store//5.将vuex创建的store挂载到vm实例上，只要挂载到了vm上。任何组件都能使用store来存取数据
})

